<include file="/public/header" />

<style>
    .layui-card-body {
        padding-left: 0;
    }

    .layui-form-item .layui-input-inline {
        width: 220px;
    }
</style>

<div class="layui-fluid layui-bg-white">
    <form class="layui-form layui-form-fixed">
        <gt name="$data.id" value="0"><input type="text" name="id" value="{$data.id}" hidden=""></gt>
        <div class="layui-form-item">
            <label class="layui-form-label">{:__('配方名称')}</label>
            <div class="layui-input-block">
                <input name="title" value="{$data.title}" placeholder="{:__('请输入配方名称')}" type="text" class="layui-input"
                    lay-verify="required" />
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">{:__('上级栏目')}</label>
            <div class="layui-input-block">
                <select name="topid" lay-search="" aria-placeholder="lll ">
                    <option value="">{:__('上级栏目')}</option>
                    <option value="0">{:__('无')}</option>
                    <foreach $tops as $v>
                        <option value="{$v.id}" <if condition="$data['topid'] eq $v.id">selected</if>>{$v.title}
                        </option>
                    </foreach>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <table class="layui-table" lay-skin="nob">
                <colgroup>
                    <col>
                    <col>
                    <col>
                    <col>
                </colgroup>
                <thead>
                    <tr>
                        <th>原材料</th>
                        <th width="80">重量(KG)</th>
                        <th width="50">操作</th>
                    </tr>
                </thead>
                <tbody id="layui-material-content">
                    <volist name="$data['list']" id="vo" key="k">
                        <tr>
                            <td>
                                <select name="list[{$k-1}][material]" lay-search="">
                                    <option value="">可输入搜索</option>
                                    <foreach $material as $v>
                                        <option value="{$v.id}" <if condition="$vo['material'] eq $v.id">selected</if>
                                            >{$v.title}</option>
                                    </foreach>
                                </select>
                            </td>
                            <td><input name="list[{$k-1}][size]" type="number"
                                    value="{$vo['size']}" class="layui-input">
                            </td>
                            <td>
                                <button type="button" class="layui-btn layui-btn-primary layui-btn-sm"><i
                                        class="layui-icon layui-icon-delete"></i></button>
                            </td>
                        </tr>
                    </volist>
                </tbody>
            </table>
        </div>
        <button type="button" class="layui-btn layui-btn-normal layui-material-add">{:__('增加一行')}</button>
        <div class="layui-footer layui-form-item layui-center ">
            <button class="layui-btn layui-btn-primary" type="button" sa-event="closeDialog">取消</button>
            <button class="layui-btn layui-btn-normal" lay-filter="submitIframe" type="button" lay-submit>提交</button>
        </div>
    </form>
</div>
<include file="/public/footer" />
<include file="/public/static" />

<script>
    layui.use(['form', 'jquery', 'layedit', 'admin'], function () {
        var form = layui.form;
        var jquery = layui.jquery;
        var material = {$material|raw};
    // 增加一行
    jquery('.layui-material-add').on('click', function () {
        var trnumber = jquery('#layui-material-content tr').length;
        var html = '<tr>';
        html += '<td><select name="list[' + trnumber + '][material]" lay-search=""><option value="">可输入搜索<\/option>';
        layui.$.each(material, function (index, type) {
            html += '<option value="' + type.id + '">' + type.title + '</option>';
        });
        html += '<\/select><\/td>';
        html += '<td><input name="list[' + trnumber + '][size]" type="text" class="layui-input" ><\/td>';
        html += '<td><button type="button" class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon layui-icon-delete"><\/i><\/button><\/td>';
        html += '<\/tr>';
        jquery('#layui-material-content').append(html);
        form.render();
    })
    // 删除签到数据
    jquery('body').on('click', '#layui-material-content .layui-btn', function () {
        jquery(this).parents('tr').remove();
    })
    });
</script>